/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
// 1.1 准备查询参数对象
const queryObj = {
  status: '', // 文章状态 （1- 待审核 2-审核通过） 空字符串 - 全部
  channel_id: '', // 文章频道 id 空字符串 - 全部
  page: 1, // 当前页码
  per_page: 2 // 当前页面条数
}
let totalCount = 0 // 保存文章总条数

const setArtileList = async () => {
  const response = await axios('/v1_0/mp/articles', { params: { queryObj: queryObj } })
  console.log(response)
  // 展示到指定标签的结构中
  const htmlStr = response.data.results.map(item => `
      <tr>
        <td>
          <img src="${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500 ` : item.cover.images[0]}" alt="">
        </td>
        <td>${item.title}</td>
        <td>
          ${item.status === 1 ? `<span class="badge text-bg-success">审核通过</span>` : `<span class="badge text-bg-primary">待审核</span>`}
        </td>
        <td>
          <span>${item.pubdate}</span>
        </td>
        <td>
          <span>${item.read_count}</span>
        </td>
        <td>
          <span>${item.comment_count}</span>
        </td>
        <td>
          <span>${item.like_count}</span>
        </td>
        <td data-id="${item.id}">
          <i class="bi bi-pencil-square edit"></i>
          <i class="bi bi-trash3 del"></i>
        </td>
      </tr>
    `).join('')
  document.querySelector('.art-list').innerHTML = htmlStr
  // 3.1 保存并设置文章总条数
  totalCount = response.data.total_count
  document.querySelector('.total-count').innerHTML = `共${totalCount}条`
}



setArtileList()

// 1.1 获取频道列表数据
const setChannleList = async () => {
  const res = await axios('/v1_0/channels')
  console.log(res.data)
  const htmlStr = '<option value="" selected="">请选择文章频道</option>' + res.data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('')
  document.querySelector('.form-select').innerHTML = htmlStr
}
setChannleList()

// 监听筛选条件改变， 保存查询信息到查询参数对象
// 筛选状态标记数字 -> change事件 -> 绑定到查询参数对象上
document.querySelectorAll('.form-check-input').forEach(radio => {
  radio.addEventListener('change', e => {
    queryObj.status = e.target.value
  })
})

// 筛选频道 id -> chenge事件 -> 绑定到查询参数对象上
document.querySelector('.form-select').addEventListener('change', e => {
  queryObj.channel_id = e.target.value
})

// 点击筛选时 传递查询参数对象到服务器
document.querySelector('.sel-btn').addEventListener('click', () => {
  setArtileList()
})


// 目标3 分页功能
// 3.2 点击下一页 做临界判断
document.querySelector('.next').addEventListener('click', e => {
  // 当前页码小于最大页码数
  if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
    queryObj.page++
    setArtileList()
  }
})

// 3.3 点击上一页
document.querySelector('.last').addEventListener('click', e => {
  if (queryObj.page > 1) {
    queryObj.page--
    document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
    setArtileList()
  }
})


// 目标四：删除文章
document.querySelector('.art-list').addEventListener('click', async e => {
  // 判断删除的元素
  if (e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id
    // 4.3 调用删除接口 传递文章 id 到服务器
    console.log(delId)
    const response = await axios.delete(`/v1_0/mp/articles/${delId}`)

    // 4.5 删除最后一页的最后一条 需要自动向前翻页
    const children = document.querySelector('.art-list').children
    if (children.length === 1 && queryObj.page !== 1) {
      queryObj.page--
      document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
    }
    setArtileList()
  }
})

// 点击编辑时，获取文章id 跳转到发布文章页面传递文章id过去
document.querySelector('.art-list').addEventListener('click', e => {
  if (e.target.classList.contains('edit')) {
    const artId = e.target.parentNode.dataset.id
    console.log(artId)
    location.href = `../publish/index.html?id=${artId}`
  }
})

